<template>
    <div>
        <el-dialog v-model="prop.isShow" :title="prop.isAdd ? '添加角色' : '编辑角色'" center :before-close="closeX"
            @open="open(formRef)">

            <el-form :model="form" :rules="rules" label-width="7.5rem" class="demo-ruleForm" status-icon ref="formRef">
                <el-form-item label="角色名称" prop="rolename">
                    <el-input v-model="form.rolename" />
                </el-form-item>

                <el-form-item label="角色权限">
                    <el-tree :data="store.getters['menu/getMenu']" show-checkbox default-expand-all node-key="id"
                        :props="defaultProps" ref="treeRef" />
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="form.status" :active-value="1" :inactive-value="2" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="close()">取消</el-button>
                    <el-button type="primary" @click="submit(formRef)">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script lang="ts" setup>
// 引入
import { useStore } from 'vuex';
import { ref, reactive, defineProps, defineEmits, defineExpose } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { roleadd, roleedit, roleinfo } from "../../request/api"

let emit = defineEmits(["close"])
let store = useStore()

let treeRef = ref()
let formRef = ref<FormInstance>()
// 方法
let getMenu = () => {
    store.dispatch("menu/getMenuAction")
}
getMenu()

let getRole = () => {
    store.dispatch("role/getRoleAction")
}
getRole()




//确定
let submit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((val) => {
        // 因为后台请求过来的menus是数组类型,所以需要转成字符串
        form.value.menus = treeRef.value.getCheckedKeys().join(",")
        if (val) {
            if (prop.isAdd) {
                roleadd(form.value).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        getRole()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })

                    }

                })

            } else {
                roleedit(form.value).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        getRole()
                        close()
                        ElMessage({
                            message: res.msg,
                            type: 'success',
                        })
                    } else {
                        ElMessage({
                            message: res.msg,
                            type: 'warning',
                        })

                    }

                })

            }
        }
    })
}
const closeX = (done: any) => {
    done()
    close()
}
//处理点击空白处的bug
let open = (formEl?: FormInstance | undefined) => {
    if (!formEl) return
    form.value = {
        rolename: '',
        menus: "",
        status: 2,
        id: 0
    }
    formEl.resetFields();
    treeRef.value.setCheckedKeys([]);
}
// 关闭清空
let close = () => {
    emit("close", false)
}

//数据回显
let lookup = (id: number) => {
    roleinfo({ id }).then((res: any) => {
        console.log(res);
        if (res.code == 200) {
            form.value = res.list
            form.value.id = id
            treeRef.value.setCheckedKeys(form.value.menus ? form.value.menus.split(",") : [])
        }

    })

}
defineExpose({
    lookup
})



//定义 rules规则
let rules = reactive<FormRules>({
    rolename: [
        { required: true, message: "请输入菜单名称", trigger: "blur" },
        { min: 2, max: 6, message: "Length should be 2 to 6", trigger: "blur" },
    ]
});
// 定义数据
let form = ref({
    rolename: '',
    menus: "",
    status: 2,
    id: 0

})
// 父传子接参
let prop = defineProps({
    isShow: Boolean,
    isAdd: Boolean
})
const defaultProps = {
    children: 'children',
    label: 'title',
}

</script>